---
name: State
menu: 1. State Containers
---

import { Props, Prop, ChildrenProps, ChildrenProp } from '../_ui/PropsTable'
import { State } from '../../dist/react-powerplug.esm'

# State

A generic component for storing arbitrary object state.  
Equals to React.Component state/setState.

## Usage

```js
import { State } from 'react-powerplug'
```

```jsx
<State initial={{ loading: false, data: null }}>
  {({ state, setState }) => {
    const onStart = data => setState({ loading: true })
    const onFinish = data => setState({ data, loading: false })

    return (
      <DataReceiver data={state.data} onStart={onStart} onFinish={onFinish} />
    )
  }}
</State>
```

## Props

<Props>
  <Prop name="initial" type="object" default={{}}>
    Specifies the initial `state`
  </Prop>
  <Prop name="onChange" type="function">
    The onChange event of the State is called whenever the state changes
  </Prop>
  <Prop name="children" type="function">
    Receive state as function. It can also be `render` prop.
  </Prop>
</Props>

## Children Props

<ChildrenProps>
  <ChildrenProp name="value" type="object">
    Your `state` value
  </ChildrenProp>
  <ChildrenProp name="setState" type="function">
    State setter. Acts equals to the{' '}
    <a href="https://facebook.github.io/react/docs/react-component.html#setstate" target="_blank">setState</a> from React.Component.
  </ChildrenProp>
  <ChildrenProp name="resetState" type="function">
    Reset to initial state
  </ChildrenProp>
</ChildrenProps>

